 import React from 'react';
import { Modal, Button,} from 'antd';
import './index.css'
import { connect } from 'react-redux'
import { Divider,Icon,List,Checkbox} from 'antd'; 
import {tartsportdateilList} from '../../redux/transportClass/transportDateils'
import { Radio } from 'antd';
import {jhstart,end,cjTer,recovery} from '../../redux/transportClass/transportDateils'
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@connect(
    state => state,
    {tartsportdateilList,jhstart,end,cjTer,recovery}
)
export default class TranspotDetail extends React.Component {
    constructor(){
        super();
        this.state = {
            planIds:'',
            checked:false,
        }
    }
    componentDidMount(){
        this.props.tartsportdateilList(this.props.id)
    }
    onChange(){

    }
    shipListCheck(planIds,e){
      
        this.setState({
            planIds:planIds,
            checked:e.target.checked
        })
    }
    jhstart1(){
        if(this.state.checked){
            this.props.jhstart(this.state.planIds)
        }
        
    }
    quxiao(){
        this.props.closeCz();
    }
    ends(){
        if(this.state.checked){
            this.props.end(this.state.planIds)
        }
        
    }
    render() {
        let transportDateilsdata = this.props.transportD.transportDateilsdata.data;
        let shipList = this.props.transportD.transportDateilsdata.shipList;
        return (
            !transportDateilsdata ?'':
            <div className='detaileList' style={{width:'94%',marginLeft:'5%'}}>
                <div>
                    <div style = {{fontSize:'18px',paddingTop:15}}>
                        <span>{transportDateilsdata.planName}</span>
                        <span style={{marginLeft:'50%'}}>
                          <span style={{paddingLeft:'8%'}}>
                                <Icon type="edit" theme="outlined" /> 
                          </span>
                          <span style={{paddingLeft:'3%'}}>
                                <Icon type="plus-circle" theme="outlined" /> 
                          </span>
                          <span style={{paddingLeft:'3%'}} onClick={this.jhstart1.bind(this)}>
                                 <Icon type="caret-right" theme="outlined" />
                          </span>
                          <span style={{paddingLeft:'3%'}} onClick={this.ends.bind(this)}>
                                 <Icon type="red-envelope" theme="outlined" />
                          </span>
                          <span style={{paddingLeft:'3%'}}>
                                <Icon type="check" theme="outlined" />
                          </span>
                          <span style={{paddingLeft:'3%'}}>
                               <Icon type="snippets" theme="outlined" />
                          </span>
                        </span>    
                    </div>
                    <div style = {{paddingTop:15}}>
                        <span>计划信息</span>
                        <span style={{float:'right',marginRight:'5%'}}>{transportDateilsdata.huoZhuName}，7-19 12:00</span>
                    </div>
                    <Divider/>
                </div>
                <div>
                    <div style={{position:'relative'}}>
                        <div style={{width:'140px'}} className='didian'>{transportDateilsdata.originalName} - {transportDateilsdata.destinationName}</div>
                        <div className='didianTitle'>
                            <span>装货地点</span>
                            <span style={{marginLeft:27}}>卸货地点</span>
                        </div>
                        <div className="hwType">
                            <div style={{width:'100px',height:'59px',textAlign:'center'}}>
                                <div style={{fontSize:'28px',color:'#2495FF',paddingTop:10,fontWeight:'bold'}}>{transportDateilsdata.goodsName}</div>
                                <div>货物种类</div>
                            </div>
                            <div style={{float:'right',width:'200px',height:'30px',textAlign:'left',position:'relative',bottom:'46px'}}>
                                <div>计划 {transportDateilsdata.planTonnage}吨</div>
                                <div>实装 {transportDateilsdata.szTonnage == '0.0'?'0':transportDateilsdata.szTonnage}吨</div>
                                <div>实收 {transportDateilsdata.ssTonnage == '0.0'?'0':transportDateilsdata.szTonnage}吨</div>
                            </div>
                        </div>
                        <div style={{paddingTop:50}}>
                            <div style={{paddingBottom: 5}}>
                              <span>计划执行状态</span>
                              <span className='maginLeft'>运输中</span>
                            </div>
                            <div style={{paddingBottom: 5}}>
                                <span>计划开始时间</span>
                                <span className='maginLeft'>{transportDateilsdata.planStartDate}</span>
                                <span className='maginLeft1'>载货平均时长</span>
                                <span className='maginLeft'>运输中</span>
                            </div>
                            <div style={{paddingBottom: 5}}>
                                <span>实际开始时间</span>
                                <span className='maginLeft'>{transportDateilsdata.realStartTime}</span>
                                <span className='maginLeft2'>卸货平均时长</span>
                                <span className='maginLeft'>运输中</span>
                            </div>
                            <div style={{paddingBottom: 5}}>
                                <span>计划完成时间</span>
                                <span className='maginLeft'>{transportDateilsdata.planEndDate}</span>
                                <span className='maginLeft1'>在航平均时长</span>
                                <span className='maginLeft'>运输中</span>
                            </div>
                            <div style={{paddingBottom: 5}}>
                                <span>实际完成时间</span>
                                <span className='maginLeft'>{transportDateilsdata.realEndDate}</span>
                                <span className='maginLeft2'>计划执行效率</span>
                                <span className='maginLeft'>运输中</span>
                            </div>
                        </div>
                        <div style={{width:200,backgroundColor:'#000000',height:'50px',marginTop:10}}>
                    
                        </div>
                        <div className='gshz'>
                            <span style={{color:'#000000',fontSize:'18px'}}>货主</span> <span className='maginLeft' style={{fontSize:'18px',color:'#000000'}}>{transportDateilsdata.companyName}</span>
                            <Divider/>
                            <div>
                                <span >联系人</span><span className='maginLeft'>{transportDateilsdata.huoZhuName}</span>
                            </div>
                            <div>
                                <span>联系电话</span><span className='maginLeft'>{transportDateilsdata.contactPhone}</span>
                            </div>
                        </div>
                        <div className='gshz'>
                            <span className='gshzTitle'>承运船波</span> 
                            <span className='maginLeft titltRadio'>   <div>
                                <RadioGroup onChange={this.onChange} defaultValue="1">
                                    <RadioButton value="1">全部</RadioButton>
                                    <RadioButton value="2">运输中</RadioButton>
                                    <RadioButton value="3">已完成</RadioButton>
                                </RadioGroup>
                                </div>
                            </span>
                            <Divider/>
                            <Button onClick={()=>this.props.addCb(this)}>添加承运船舶</Button>
                            <div>
                            <List
                                itemLayout="horizontal"
                                dataSource={!shipList ? '' :shipList}
                                renderItem={items => (
                                <List.Item>
                                    <List.Item.Meta
                                    avatar={<div style={{marginLeft:'100%'}} >
                                                <Checkbox onChange={this.shipListCheck.bind(this,items.planId)}/>
                                                </div>
                                            }
                                        description={
                                            <div  style={{marginLeft:'5%',overflow:'hidden'}}>
                                               <div  style={{width:'20%'}}>
                                                <div >
                                                    <span>TSKJGS</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span style={{width:'50%',textAlign:'right'}}>2000吨</span>
                                                </div>
                                                <div >
                                                    <span>里床位</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>15895974630</span>
                                                </div>
                                                </div>
                                                <div  style={{width:'20%',textAlign:'center',float:'left'}}>
                                                <div >
                                                    <span>很多更何况机构的贷款</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                                <div >
                                                    <span>07-1&nbsp;&nbsp;&nbsp;&nbsp;24:00:00</span>
                                                </div>
                                                </div>
                                                <div  style={{width:'20%',textAlign:'center'}}>
                                                <div >
                                                    <span>很多更何况机构的贷款</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                                <div >
                                                    <span>07-1&nbsp;&nbsp;&nbsp;&nbsp;24:00:00</span>
                                                </div>
                                                </div>
                                            </div>
                                        }
                                    />
                                </List.Item>
                                )}
                            /> 
                            </div>
                        </div>
                        
                    </div>
                   
                </div>
                <div style={{widthMax:'1920px',widthMin:'1200px', width:'1685px',lineHeight:'80px', height:'80px',backgroundColor:'#fff',border:'solid 1px red',position:'fixed',bottom:'0',left:'0',zIndex:'999999',display:this.props.isCz?'block':'none'}}>
                    <Checkbox style={{marginLeft:'230px'}}/> <span>已选</span>
                    <Button onClick={this.jhstart1.bind(this)} style={{marginLeft:'80px'}}>开始计划</Button>
                    <Button onClick={()=> this.props.cjTer()} style={{marginLeft:'30px'}}>终止计划</Button>
                    <Button onClick={()=> this.props.ends()} style={{marginLeft:'30px'}}>完成计划</Button>
                    <Button style={{marginLeft:'30px'}}>分类标签</Button>
                    <span onClick={this.quxiao.bind(this)} style={{marginLeft:'80px'}}>取消</span>
                </div>
            </div>
        );
    }
}